<template>
  <el-dialog v-model="dialogVisible" :title="title" width="40%" @close="closeCallback" :draggable="true" align-center>
    <div class="hei">
      <el-form v-show="!showPregrees" ref="formRef" :model="form" label-suffix=" :" label-width="100px" :rules="rules">
        
        <el-form-item v-if="!isShowTeamName" label="团队成员" prop="staffId">
          <el-select v-model="form.staffId" placeholder="请选择成员">
            <el-option v-for="(item, index) in selecTtransformMember" :key="index" :label="item.staffName"
              :value="item.staffId" />
          </el-select>
        </el-form-item>

        <el-form-item v-else label="职场" prop="staffId">
          <el-select v-model="form.staffId" placeholder="请选择职场">
            <el-option label="欢创"
              value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="flex" v-show="showPregrees">
        <el-progress type="dashboard" :percentage="percentage" :color="colors" />
      </div>
    </div>

    <template #footer>
      <span v-if="!showPregrees" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmPush(formRef)">
          确认
        </el-button>
      </span>
      <span v-else>
        <el-button type="primary" @click="understand(formRef)">
          知道了
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script setup>
import { ref, reactive, computed, toRaw, shallowReactive,getCurrentInstance ,inject,onMounted} from 'vue'
import { ElMessageBox } from 'element-plus'
import { staffData } from "../../stores/staff"
import { worksData } from "@/stores/worksData.js"

// 仓库实例

const mWorks = worksData()
// 当前实例
let {proxy} = getCurrentInstance()

// 进度条的颜色
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]
// 进度条
const percentage = ref(0)

const showPregrees = ref(false)

// 定时器实例
let timer = null

// 状态值
let state =inject("state")
let examine =inject("examine")
let isShowTeamName = inject("isShowTeamName",false)

let mStaff = staffData()

const form = reactive({
  staffId: '',
  worksList: [],
  state:state,
  examine:examine
})

// form表单实例
let formRef = ref()

// 规则
const rules = reactive({
  staffId: [
    { required: true, message: '请选择你的成员', trigger: 'change' },
  ],
})

//选择转单的成员
let selecTtransformMember = computed(() => {
  return mStaff.ownTeamMember
})

let title = computed(() => {
  return `批量转交(${form.worksList.length})`
})



let teamList = ref([])

const dialogVisible = ref(false)

// 提交数据
const confirmPush = async (formEl) => {
  if (!formEl) return
  // dialogVisible.value = false
  await formEl.validate((valid, fields) => {
    if (valid) {
      showPregrees.value = true
      // 提交数据
      bulkPushData()

      // console.log(toRaw(form), "提交数据了喔")
    } else {
      // console.log('error submit!', fields)
    }
  })

}

// 增加进度条函数
const increase = () => {
  percentage.value += 15
  if (percentage.value > 100) {
    percentage.value = 100
    clearInterval(timer)
  }
}

// 批量提交数据给和后端
const bulkPushData = async () => {
  timer = setInterval(() => {
      // console.log("我爱你")
      increase()
    }, 500)
  let res = await mWorks.bulkForwardWorkDatas(toRaw(form))

  //  console.log(res)
}

// 知道了
const understand = () => {
  // resetForm(formRef.value)
  dialogVisible.value = false

  // // 通知刷新数据
  // proxy.$Bus.emit("updateWorksData")

}

// 取消并重置数据
const resetForm = (formEl) => {
  if (!formEl) return
  // console.log("dfefe;;cscs")
  formEl.resetFields()
  dialogVisible.value = false
  showPregrees.value = false
  percentage.value = 0
  clearInterval(timer)
}

// dialog关闭的回调
const closeCallback = () => {
  resetForm(formRef.value)
  proxy.$Bus.emit("updateWorksData")

}

//   触发对话框
const openDialog = (e) => {
  dialogVisible.value = true
  // console.log(e)
  form.worksList = toRaw(e)
}


defineExpose({
  openDialog
})

onMounted(()=>{
    // console.log(state,examine)
})

</script>
<style scoped>
.hei {
  height: 150px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}

.el-progress--circle {
  margin-right: 15px;
  height: 180px !important;
  widows: 180px !important;
}
</style>